<!--
    研判任务
 * @Author: zhanbh
 * @Date: 2021-04-08 10:46:41
 * @project: 天津YQ平台
-->
<template>
  <div class="info-110">
    <el-form ref="form" label-width="80px">
      <div class="table-filter table-filter-home">
        <div>
          <el-form-item label="发布时间:">
            <el-date-picker
              v-model="publishTime"
              clearable
              type="datetimerange"
              value-format="yyyyMMddHHmm"
              format="yyyy-MM-dd HH:mm"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00']"
            />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="发布单位:">
                  <dg-tree-drop
                 v-model="condition.fbdwdm.value"
                 :code="BM_DEPT"
                 :check-strictly="true"
                 :props="props" lazy-load
                 filterable clearable
                 value-name="value"
                 label-name="label"
                 style="width: 100%"
                 multiple
                 collapse-tags
                 :cacheable="true"
            ></dg-tree-drop>
            <!-- <dg-select v-model="condition.fbdwdm.value" lazy-load :data="constant.BM_DEPT" clearable /> -->
          </el-form-item>
        </div>
        <div>
          <el-form-item label="最晚反馈时间:" label-width="120px">
            <el-date-picker
              v-model="time"
              clearable
              type="datetimerange"
              value-format="yyyyMMddHHmm"
              format="yyyy-MM-dd HH:mm"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00']"
            />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="指令状态:">
            <dg-select v-model="condition.zlzt.value" :data="constant.BM_QSFKZT" clearable />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="关键词:">
            <el-input v-model="condition.keyword.value"  placeholder="报警内容、标题" clearable />
          </el-form-item>
        </div>
        <div>
          <el-form-item class="operate-btns">
            <el-button type="primary" size="mini" @click="() => $refs.table.searchForm()"> 查询 </el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="info-110__list">
      <!-- :defaultSort="{
          prop: 'fbsj',
          order: 'descending'
        }" -->
      <comm-table ref="table" :condition="condition" :columns="columns" url="/v1/jqxx-ypzl/search">
        <template slot-scope="{ row }">
          <el-button type="text" v-permission="['YPRW_QS']" @click="onSign(row)" :disabled="row.qszt === '1'">
            签收
          </el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" v-permission="['YPRW_FK']" :disabled="row.qszt === '0'" @click="onFeedback(row)">
            反馈
          </el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button
            type="text"
            v-permission="['YPRW_YPZL']"
            @click="() => $router.push({ name: 'PolicJudgeOrder', params: { id: row.jqxxbh, zlly: '2' } })"
          >
            研判指令
          </el-button>
        </template>
      </comm-table>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { deepClone } from '@/utils/common';
import { BM_DEPT } from '@/common/codeDic';
import { signIn } from '@/api/police';
export default {
  name: 'PoliceJudgeTaskHome',
  data() {
    return {
      BM_DEPT,
      publishTime: [],
      time: [],
      checkedYP: [],
      isImmerYP: false,
      checkAllYP: false,
      checkedXF: [],
      isImmerXF: false,
      checkAllXF: false,
      cloneCondition: null,
      columns: [
        { label: '序号', type: 'index' },
        { label: '发布时间', prop: 'fbsj', width: 180 },
        {
          label: '指令要求',
          prop: 'zlyq'
        },
        {
          label: '关联警情',
          prop: 'title',
          render: (h, row) => {
            const _this = this;
            return h(
              'div',
              {
                class: 'v-link',
                on: {
                  click() {
                    // 隐藏tooltip(由于不自动消失)
                    $('.el-tooltip__popper').css('display', 'none');
                    signIn(row.id);
                    _this.$router.push({ name: 'PolicJudgeDetail', params: { id: row.jqxxbh } });
                  }
                }
              },
              row.bjnr
            );
          }
        },
        { label: '最晚反馈时间', prop: 'zwfksj', width: 180 },

        {
          label: '指令状态',
          render: (h, row) =>
            h('div', {}, [
              h('span', {}, row.qszt === '0' ? '未签收' : '已签收'),
              h('span', {}, '/'),
              h('span', {}, row.fkzt === '0' ? '未反馈' : row.fkzt === '1' ? '按时反馈' : '超时反馈')
            ])
        },
        { label: '发布单位', prop: 'fbdwdm', code: BM_DEPT },
        { label: '发布人', prop: 'fbrxm' },
        { label: '操作', type: 'operate', width: 220 }
      ],
      condition: {
        fbdwdm: {
          value: '',
          op: '='
        },
        keyword: {
          value: '',
          op: 'like'
        },
        zlzt: {
          value: '',
          op: 'custom_qsfkztIn'
        },
        zwfksj: {
          value: '',
          op: 'custom_rangeDateTime'
        },

        fbsj: {
          value: '',
          op: 'custom_rangeDateTime'
        }
      },
        props: {
           value: "value"
            },
    };
  },
  computed: {
    ...mapState(['constant'])
  },
  activated() {
    this.$refs.table.searchForm();
  },
  watch: {
     fbdwdm(val) {
     this.condition.fbdwdm.value = val.length ? val : '';
    },
    time(val) {
      this.condition.zwfksj.value = val ? `${val[0]},${val[1]}` : '';
    },
    publishTime(val) {
      this.condition.fbsj.value = val ? `${val[0]},${val[1]}` : '';
    },
    checkedXF(val) {
      this.condition[this.xfStatus].value = val.map((v) => v).join();
    },
    checkedYP(val) {
      this.condition.ypzt.value = val.map((v) => v).join();
    }
  },
  mounted() {
    this.$store.dispatch('getConstant', ['BM_YPZT', 'BM_QSFKZT', 'BM_DEPT']);
    this.cloneCondition = deepClone(this.condition);
  },
  methods: {
    onFeedback(row) {
      if (row.qszt === '0') {
        this.$message.warning('请先签收，再进行反馈');
      } else {
        this.$router.push({ name: 'PolicJudgeFeedback', params: { id: row.id, jqid: row.jqxxbh } });
      }
    },
    /**
     * 签收
     */
    onSign(row) {
      this.$confirm('确认签收?').then(() => {
        const loadingInstance = this.$loading({
          lock: true,
          text: '签收中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        signIn(row.id)
          .then(() => {
            this.$refs.table.searchForm();
            this.$message.success('签收成功');
            loadingInstance.close();
          })
          .catch(() => {
            this.$message.warning('签收失败');
            loadingInstance.close();
          });
      });
    },
    reset() {
      this.time = null;
      this.publishTime = null;
      this.checkedXF = [];
      this.checkedYP = [];
      this.isImmerXF = false;
      this.isImmerYP = false;
      this.checkAllXF = false;
      this.checkAllYP = false;
      this.condition = deepClone(this.cloneCondition);
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.info-110 {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 11rem);
  overflow: hidden;
  .check-box {
    display: flex;
    /deep/.checkbox-group {
      text-align: left;
    }
    /deep/ .el-checkbox {
      margin-right: 6px;
    }
  }
  &__list {
    flex-shrink: 1;
    flex-grow: 1;
    margin-top: 10px;
    background-color: #fff;
    padding: 1.5rem 2rem;
  }
}
</style>
